<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表的增删和移动</title>
    <link rel="stylesheet" type="text/css" href="css1.css" />
    <script src="list.js"></script>
</head>

<body>
    <form>
        <div class="list">
            <ul class="list-ul">
                <li class="list-option">
                    <input class="list-input" type="text" value="HTML+CSS">
                    <span class="list-btn">
                        <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                    </span>
                </li>
                <li class="list-option">
                    <input class="list-input" type="text" value="JavaScript">
                    <span class="list-btn">
                        <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                    </span>
                </li>
                <li class="list-option">
                    <input class="list-input" type="text" value="c">
                    <span class="list-btn">
                        <span class="list-up">[上移]</span>
                    <span class="list-down">[下移]</span>
                    <span class="list-del">[删除]</span>
                    </span>
                </li>

            </ul>
            <div class="list-bottom">
                <span class="list-add-show"><span>添加项目</span></span>
                <div class="list-add-area hide">
                    添加到列表：
                    <input class="list-add-input" type="text" name="list[]">
                    <input class="list-add-add" type="button" value="添加">
                    <input class="list-add-cancel" type="button" value="取消">
                </div>
            </div>
        </div>
    </form>
</body>

</html>